<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴趣交友测试 - 发现志同道合的朋友</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #f0f9ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background-color: white;
        }
        
        .container {
            padding: 2rem 0;
        }
        
        .section-header {
            margin-bottom: 2.5rem;
        }
        
        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        
        .section-subtitle {
            color: var(--secondary);
            max-width: 800px;
        }
        
        /* 分类导航 */
        .category-nav {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            gap: 0.75rem;
            scrollbar-width: thin;
        }
        
        .category-nav::-webkit-scrollbar {
            height: 4px;
        }
        
        .category-nav::-webkit-scrollbar-thumb {
            background-color: var(--primary-light);
            border-radius: 4px;
        }
        
        .category-item {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.5rem 1.25rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .category-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 测试卡片基础样式 */
        .test-card {
            background-color: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 1.5rem;
        }
        
        .test-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .test-content {
            padding: 1.5rem;
        }
        
        .test-header {
            margin-bottom: 1rem;
        }
        
        .test-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
        }
        
        .test-card:hover .test-title {
            color: var(--primary);
        }
        
        .test-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--secondary);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }
        
        .test-author {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .test-description {
            color: var(--secondary);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .test-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .test-tag {
            background-color: var(--light);
            color: var(--secondary);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
        }
        
        .test-stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
            font-size: 0.875rem;
        }
        
        .stat-group {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            color: var(--secondary);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .test-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            transition: color 0.2s;
            padding: 0.25rem;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        .take-test-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem 1.25rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: background-color 0.2s;
            margin-left: auto;
        }
        
        .take-test-btn:hover {
            background-color: #4f46e5;
        }
        
        /* 不同布局样式 */
        /* 无图片布局 */
        .no-image-card {
            border-left: 4px solid var(--primary);
        }
        
        /* 单图片布局 */
        .single-image-card .test-media {
            height: 200px;
            position: relative;
        }
        
        .single-image-card .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 多图片布局 */
        .multi-image-card .test-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            height: 160px;
            gap: 2px;
        }
        
        .multi-image-card .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-image-card .image-count {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 大图布局 */
        .large-image-card .test-media {
            height: 280px;
            position: relative;
        }
        
        .large-image-card .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .large-image-card .test-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: white;
        }
        
        .large-image-card .test-title {
            color: white;
        }
        
        .large-image-card .test-description,
        .large-image-card .test-meta,
        .large-image-card .test-tag {
            color: rgba(255, 255, 255, 0.85);
        }
        
        .large-image-card .test-tag {
            background-color: rgba(255, 255, 255, 0.15);
        }
        
        .large-image-card .stat-group,
        .large-image-card .action-btn {
            color: rgba(255, 255, 255, 0.85);
        }
        
        .large-image-card .action-btn:hover {
            color: white;
        }
        
        .large-image-card .action-btn.liked {
            color: var(--danger);
        }
        
        .large-image-card .test-stats {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        
        .large-image-card .take-test-btn {
            background-color: white;
            color: var(--primary);
        }
        
        .large-image-card .take-test-btn:hover {
            background-color: var(--light);
        }
        
        /* 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        /* 列表布局 */
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        .list-item {
            display: flex;
            height: 200px;
        }
        
        .list-item .test-media {
            flex: 0 0 30%;
            height: 100%;
        }
        
        .list-item .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .list-item .test-content {
            flex: 0 0 70%;
            display: flex;
            flex-direction: column;
        }
        
        .list-item .test-stats {
            margin-top: auto;
        }
        
        /* 特色布局 */
        .featured-layout {
            margin-bottom: 3rem;
        }
        
        .featured-item {
            margin-bottom: 2rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .list-item {
                flex-direction: column;
                height: auto;
            }
            
            .list-item .test-media {
                flex: none;
                height: 200px;
            }
            
            .list-item .test-content {
                flex: none;
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.75rem;
            }
            
            .test-stats {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .test-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .take-test-btn {
                margin-left: 0;
                width: 100%;
            }
            
            .large-image-card .test-media {
                height: 220px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-compass text-primary me-2"></i>兴趣社交
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">兴趣测试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">交友推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">社区</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-primary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container">
        <div class="section-header">
            <h1 class="section-title">兴趣交友测试</h1>
            <p class="section-subtitle">通过有趣的测试发现你的兴趣爱好，找到志同道合的朋友。完成测试后，我们会根据你的结果推荐匹配度最高的伙伴。</p>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
            <div class="category-item active">全部测试</div>
            <div class="category-item">性格测试</div>
            <div class="category-item">兴趣爱好</div>
            <div class="category-item">生活方式</div>
            <div class="category-item">职业倾向</div>
            <div class="category-item">音乐品味</div>
            <div class="category-item">电影偏好</div>
            <div class="category-item">旅行风格</div>
            <div class="category-item">美食选择</div>
        </div>
        
        <!-- 特色测试区 -->
        <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 1.5rem;">特色推荐</h2>
        <div class="featured-layout">
            <!-- 大图布局测试 -->
            <div class="test-card large-image-card featured-item">
                <div class="test-media">
                    <img src="https://picsum.photos/1200/400?random=10" alt="旅行风格测试封面图" class="test-image">
                    <div class="test-content">
                        <div class="test-header">
                            <h3 class="test-title">你的旅行风格是什么？寻找完美旅伴</h3>
                            <div class="test-meta">
                                <span class="test-author">
                                    <img src="https://picsum.photos/100/100?random=101" alt="张雨晴的头像" class="author-avatar">
                                    张雨晴
                                </span>
                                <span>·</span>
                                <span>发布于 2周前</span>
                            </div>
                        </div>
                        <p class="test-description">通过12道题测试你的旅行偏好：你是冒险探索者、文化体验者还是休闲放松派？找到与你旅行风格最匹配的伙伴。</p>
                        <div class="test-tags">
                            <span class="test-tag">旅行</span>
                            <span class="test-tag">性格</span>
                            <span class="test-tag">生活方式</span>
                        </div>
                        <div class="test-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>12,587</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i>
                                    <span>842</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-user-check"></i>
                                    <span>5,321人已测试</span>
                                </div>
                            </div>
                            <div class="test-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>2,154</span>
                                </button>
                                <button class="action-btn saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>987</span>
                                </button>
                                <button class="take-test-btn">开始测试</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 网格布局测试区 -->
        <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 1.5rem;">热门兴趣测试</h2>
        <div class="grid-layout">
            <!-- 无图片测试 -->
            <div class="test-card no-image-card">
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">你的音乐品味如何？找到同好</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=102" alt="李哲的头像" class="author-avatar">
                                李哲
                            </span>
                            <span>·</span>
                            <span>发布于 1周前</span>
                        </div>
                    </div>
                    <p class="test-description">通过分析你对不同音乐风格的偏好，找到与你音乐品味最契合的朋友，一起分享新歌和演唱会信息。</p>
                    <div class="test-tags">
                        <span class="test-tag">音乐</span>
                        <span class="test-tag">兴趣爱好</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>8,742</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>512</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>3,842人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>1,542</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>753</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 单图片测试 -->
            <div class="test-card single-image-card">
                <div class="test-media">
                    <img src="https://picsum.photos/600/400?random=20" alt="美食偏好测试图片" class="test-image">
                </div>
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">你的美食探索类型是什么？</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=103" alt="王建国的头像" class="author-avatar">
                                王建国
                            </span>
                            <span>·</span>
                            <span>发布于 3天前</span>
                        </div>
                    </div>
                    <p class="test-description">从街边小吃到米其林餐厅，测试你的美食冒险指数，找到可以一起探店的美食伙伴。</p>
                    <div class="test-tags">
                        <span class="test-tag">美食</span>
                        <span class="test-tag">生活方式</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>6,254</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>328</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>2,741人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>1,254</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>521</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 多图片测试 -->
            <div class="test-card multi-image-card">
                <div class="test-media" style="position: relative;">
                    <img src="https://picsum.photos/300/300?random=31" alt="电影类型测试图片1" class="test-image">
                    <img src="https://picsum.photos/300/300?random=32" alt="电影类型测试图片2" class="test-image">
                    <img src="https://picsum.photos/300/300?random=33" alt="电影类型测试图片3" class="test-image">
                    <div class="image-count">+5</div>
                </div>
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">你的电影偏好图谱测试</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=104" alt="刘阳的头像" class="author-avatar">
                                刘阳
                            </span>
                            <span>·</span>
                            <span>发布于 5天前</span>
                        </div>
                    </div>
                    <p class="test-description">从类型、导演到观影习惯，全面分析你的电影品味，找到可以彻夜讨论电影的同好。</p>
                    <div class="test-tags">
                        <span class="test-tag">电影</span>
                        <span class="test-tag">兴趣爱好</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>7,842</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>476</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>3,254人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>1,876</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>642</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 列表布局测试区 -->
        <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 1.5rem;">最新上线测试</h2>
        <div class="list-layout">
            <!-- 列表项1 -->
            <div class="test-card list-item">
                <div class="test-media">
                    <img src="https://picsum.photos/600/400?random=40" alt="阅读偏好测试图片" class="test-image">
                </div>
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">你的阅读品味测试：找到书友</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=105" alt="陈明的头像" class="author-avatar">
                                陈明
                            </span>
                            <span>·</span>
                            <span>发布于 昨天</span>
                        </div>
                    </div>
                    <p class="test-description">测试你的阅读偏好、习惯和最爱类型，匹配和你阅读品味相似的朋友，组建线上读书会。</p>
                    <div class="test-tags">
                        <span class="test-tag">阅读</span>
                        <span class="test-tag">文学</span>
                        <span class="test-tag">兴趣爱好</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>2,154</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>128</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>876人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>425</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>187</span>
                            </button>
                            <button class="take-test-btn">开始测试</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表项2（无图片） -->
            <div class="test-card list-item no-image-card">
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">周末活动偏好测试：找到玩伴</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=106" alt="林小燕的头像" class="author-avatar">
                                林小燕
                            </span>
                            <span>·</span>
                            <span>发布于 2天前</span>
                        </div>
                    </div>
                    <p class="test-description">周末你更喜欢户外活动、室内聚会还是独自放松？测试你的周末偏好，找到可以一起度过周末的朋友。</p>
                    <div class="test-tags">
                        <span class="test-tag">生活方式</span>
                        <span class="test-tag">社交</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>3,842</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>254</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>1,542人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>753</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>241</span>
                            </button>
                            <button class="take-test-btn">开始测试</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表项3（多图片） -->
            <div class="test-card list-item multi-image-card">
                <div class="test-media" style="position: relative;">
                    <img src="https://picsum.photos/300/300?random=51" alt="运动类型测试图片1" class="test-image">
                    <img src="https://picsum.photos/300/300?random=52" alt="运动类型测试图片2" class="test-image">
                    <img src="https://picsum.photos/300/300?random=53" alt="运动类型测试图片3" class="test-image">
                </div>
                <div class="test-content">
                    <div class="test-header">
                        <h3 class="test-title">你的运动偏好测试：找到运动伙伴</h3>
                        <div class="test-meta">
                            <span class="test-author">
                                <img src="https://picsum.photos/100/100?random=107" alt="赵宇的头像" class="author-avatar">
                                赵宇
                            </span>
                            <span>·</span>
                            <span>发布于 3天前</span>
                        </div>
                    </div>
                    <p class="test-description">从团队运动到个人锻炼，测试你的运动喜好和强度偏好，匹配合适的运动伙伴一起坚持锻炼。</p>
                    <div class="test-tags">
                        <span class="test-tag">运动</span>
                        <span class="test-tag">健康</span>
                        <span class="test-tag">户外活动</span>
                    </div>
                    <div class="test-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>4,253</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>321</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-user-check"></i>
                                <span>1,876人已测试</span>
                            </div>
                        </div>
                        <div class="test-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>954</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>325</span>
                            </button>
                            <button class="take-test-btn">开始测试</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container d-flex justify-content-center mt-4">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 分类切换功能
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活跃状态
                    categoryItems.forEach(cat => cat.classList.remove('active'));
                    
                    // 添加当前分类活跃状态
                    this.classList.add('active');
                });
            });
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.action-btn:not(.saved)');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('liked')) {
                        // 取消点赞
                        this.classList.remove('liked');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        
                        // 更新点赞数
                        if (this.textContent.trim().match(/\d+/)) {
                            let count = parseInt(this.textContent.trim().match(/\d+/)[0]);
                            this.innerHTML = `<i class="${icon.classList.value}"></i> <span>${count - 1}</span>`;
                        }
                    } else {
                        // 点赞
                        this.classList.add('liked');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        
                        // 更新点赞数
                        if (this.textContent.trim().match(/\d+/)) {
                            let count = parseInt(this.textContent.trim().match(/\d+/)[0]);
                            this.innerHTML = `<i class="${icon.classList.value}"></i> <span>${count + 1}</span>`;
                        }
                    }
                });
            });
            
            // 收藏功能
            const saveBtns = document.querySelectorAll('.action-btn.saved, .action-btn:has(.fa-bookmark:not(.fa-heart))');
            saveBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('saved')) {
                        // 取消收藏
                        this.classList.remove('saved');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    } else {
                        // 收藏
                        this.classList.add('saved');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    }
                });
            });
            
            // 开始测试按钮点击效果
            const testBtns = document.querySelectorAll('.take-test-btn');
            testBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const testTitle = this.closest('.test-card').querySelector('.test-title').textContent;
                    
                    // 显示提示信息
                    const alertDiv = document.createElement('div');
                    alertDiv.className = 'alert alert-success alert-dismissible fade show position-fixed top-20 end-3 z-3';
                    alertDiv.role = 'alert';
                    alertDiv.innerHTML = `即将开始：${testTitle}`;
                    
                    const closeBtn = document.createElement('button');
                    closeBtn.type = 'button';
                    closeBtn.className = 'btn-close';
                    closeBtn.dataset.bsDismiss = 'alert';
                    closeBtn.ariaLabel = 'Close';
                    
                    alertDiv.appendChild(closeBtn);
                    document.body.appendChild(alertDiv);
                    
                    // 2秒后自动关闭提示
                    setTimeout(() => {
                        const bsAlert = new bootstrap.Alert(alertDiv);
                        bsAlert.close();
                    }, 2000);
                });
            });
            
            // 分页功能
            const pageLinks = document.querySelectorAll('.page-link:not([aria-label])');
            pageLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活跃状态
                    document.querySelectorAll('.page-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 添加当前页活跃状态
                    this.parentElement.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>
    
